<script lang='ts' setup>
import { ref } from 'vue'
import dayjs from 'dayjs';
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';

const Route = useRouter()
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const checked1 = ref<boolean>(true)
const checked2 = ref<boolean>(false)
const currentPage4 = ref<number>(4)
const pageSize4 = ref<number>(100)
const small = ref<boolean>(false)
const background = ref<boolean>(false)
const disabled = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const name = ref<string>('')
const time = ref<Date>()
const trainingType = ref<string>('')
const purpose = ref<string>('')
const principal = ref<string>('')

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定关闭弹窗吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const addTraining = (): void => {
  console.log(time.value)
  const date = dayjs().format('yyyy-MM-dd')
  console.log(date)
  dialogVisible.value = false
}
// 人员安排
const staffing = (): void => {
  Route.push({ name: 'staffing' })
}
</script>

<template>
  <div class="main-head">
    <div class="l-head">
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    </div>
    <div class="r-head">
      <el-checkbox v-model="checked1" label="已完结" size="large" />
      <el-checkbox v-model="checked2" label="未完结" size="large" />
    </div>
  </div>
  <div class="main-body">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <el-table-column fixed="right" label="操作" width="300">
        <template #default>
          <el-button link type="primary" @click="staffing" size="small">人员</el-button>
          <el-button link type="primary" size="small">课程</el-button>
          <el-button link type="primary" size="small">安排</el-button>
          <el-button link type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="demo-pagination-block">
    <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="dialogVisible" title="添加培训班" width="30%" :before-close="handleClose">
    <el-input class="margin-bottom-10" v-model="name" placeholder="名称" clearable />
    <div class="block margin-bottom-10">
      <el-date-picker v-model="time" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
    </div>
    <el-input class="margin-bottom-10" v-model="trainingType" placeholder="培训类型" clearable />
    <el-input class="margin-bottom-10" v-model="purpose" placeholder="培训目的" clearable />
    <el-input class="margin-bottom-10" v-model="principal" placeholder="负责人" clearable />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addTraining">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
div {
  display: flex;
}

.main-head {
  justify-content: space-between;
}

.demo-pagination-block {
  margin-top: 20px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}
</style>